<template>
	<view v-if="isShow" class="yx-popup-view"
		:class="{'yxPopupViewCenter':emStyle==='center','yxPopupViewTop':emStyle==='top','yxPopupViewBottom':emStyle==='bottom','yxPopupViewLeft':emStyle==='left','yxPopupViewRight':emStyle==='right'}">
		<view class="yx-popup-box" style="padding: 20px;">
			<view class="" style="display: flex;justify-content: space-between;align-items: center;">
				<text style="padding-top: 10px;font-weight: bold;">上传图片</text>
				<view class="">
					<icon v-if:show="isUp" class="finish" type="download" size="24" color="#007aff"
						style="padding: 5px;" @click="EventFinish()">
					</icon>
					<icon type="clear" size="24" color="#dd524d" style="padding: 5px;" @click="EventClose">
					</icon>
				</view>
			</view>
			<scroll-view class="parent" scroll-y="true" style="padding: 20px;max-height: 60vh;">

				<cosMultipleItemVue v-for="(item, index) in imageArray" :key="index" :data="item" :host="host"
					:token="token" path="product" @enentIndex="EventProgress" @finish="EventFinish" @error="EventError">
				</cosMultipleItemVue>

			</scroll-view>
			<view style="display: flex;flex-direction: column;gap: 10px;"></view>
		</view>
	</view>
</template>

<script>
	import COS from 'cos-js-sdk-v5'
	import cosMultipleItemVue from './cos-multiple-item.vue';
	export default {
		name: "cos-multiple-post",
		data() {
			return {
				iH: 0,
				isShow: false,
				emStyle: 'center',
				boxStyle: 'yxPopupBoxCenter',
				imageArray: [],
				progressArray: [],
				urlArray: [],
				isUp: true
			};
		},
		mounted() {
			let window = uni.getWindowInfo();
			this.iH = window.screenHeight;
		},
		components: {
			cosMultipleItemVue
		},
		props: {
			host: {
				type: String,
				default: 'https://api.yuejunxi.com'
			},
			token: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: 'product'
			},
			once: {
				type: Boolean,
				default: false
			},
			onHide: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			open(e = 'center') {
				this.emStyle = e;
				this.hasTest()
			},
			EventError(e) {
				console.log('EventError', e);
				let that = this
				uni.showModal({
					title: '失败',
					content: '处理失败请重试',
					showCancel: false,
					success(r) {
						that.imageArray = []
						that.progressArray = []
						that.urlArray = []
						that.isShow = false
					}
				})
			},
			EventClose() {
				if (this.progressArray.length > 0) {
					let that = this
					uni.showModal({
						title: '关闭',
						content: '任务尚未完成，是否要终止队列?',
						success(r) {
							if (r.confirm) {
								that.imageArray = []
								that.progressArray = []
								that.urlArray = []
								that.isShow = false
							}
						}
					})
				} else {
					this.isShow = false
				}
			},
			EventProgress(e) {
				console.log('EventProgress', e);
				this.progressArray.push(e);
			},
			EventFinish(e = null) {
				// console.log('EventFinish', e);
				if (e !== null) {
					this.urlArray.push(e)
				}
				if (this.progressArray.length > 0) {
					let file = this.progressArray.shift()
					file.hasPost()
					this.isUp = false
				}
				if (this.urlArray.length === this.imageArray.length) {
					this.$emit('upFinish', this.urlArray)
					if (this.onHide) {
						this.isShow = false
					}
					this.isUp = true
					uni.showToast({
						title: '所有任务完成'
					})
				}
			},
			/**
			 * 轮询图片
			 */
			async hasTest() {
				this.imageArray = []
				this.progressArray = []
				this.urlArray = []
				let picArray = await this.hasPicFile()
				this.imageArray = picArray

				if (picArray.length > 0) {
					this.isShow = true;
				}
			},
			/**
			 * 选择图片对象
			 */
			hasPicFile() {
				return new Promise((resolve, reject) => {
					let that = this
					uni.chooseImage({
						count: that.once ? 1 : 999,
						success(res) {
							resolve(res.tempFiles)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.yx-popup-view {
		width: 100%;
		height: 100%;
		background-color: #88888888;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		flex-direction: column;
	}

	.yxPopupViewTop {
		justify-content: flex-start;
		align-items: center;

		.yx-popup-box {
			padding: 10px;
			background-color: #fff;
			width: 100%;
			border-radius: 0 0 10px 10px;
		}
	}

	.yxPopupViewBottom {
		justify-content: flex-end;
		align-items: center;

		.yx-popup-box {
			padding: 10px;
			background-color: #fff;
			width: 100%;
			border-radius: 10px 10px 0 0;
		}
	}

	.yxPopupViewLeft {
		justify-content: flex-start;
		align-items: start;

		.yx-popup-box {
			padding: 10px;
			background-color: #fff;
			height: 100%;
			border-radius: 0 10px 10px 0;
		}
	}

	.yxPopupViewRight {
		justify-content: flex-start;
		align-items: end;

		.yx-popup-box {
			padding: 10px;
			background-color: #fff;
			height: 100%;
			border-radius: 10px 0 0 10px;
		}
	}

	.yxPopupViewCenter {
		justify-content: center;
		align-items: center;

		.yx-popup-box {
			padding: 10px;
			background-color: #fff;
			border-radius: 10px;
		}
	}

	.finish {
		// transform-style: rotateX(180deg);
		// transform-style: rotateZ(180deg);
		transform: rotate(180deg);
	}


	/* 隐藏垂直滚动条 */
	.parent {
		scrollbar-width: none;
	}

	/* 隐藏水平滚动条 */
	.parent {
		scrollbar-height: none;
	}
</style>